<template>
  <el-dialog v-if="visible" :title="info.title" :visible.sync="visible" append-to-body center width="960px" :before-close="handleCancel">
    <el-row>
      <el-col :span="17">
        <el-row>
          <el-col :span="24">
            <el-form label-suffix=":" label-width="120px">
              <el-row class="f-body">
                <el-col v-for="(item, index) in forms" :key="index" :span="24">
                  <el-form-item class="f-item" :label="item.t">
                    {{ item.v }}
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-col>
          <el-col v-if="fileList.length > 0" :span="24">
            <el-table class="search-table" :data="fileList" border fit highlight-current-row style="width: 100%;">
              <el-table-column label="序号" align="center" width="56px">
                <template slot-scope="{$index}">
                  {{ $index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="文件名称" min-width="200px">
                <template slot-scope="{row}">
                  <a href="javascript:void(0)" class="tba" target="_blank" @click="handleWV(row.url)">{{ row.file_name }}</a>
                </template>
              </el-table-column>
              <el-table-column label="下载" align="center" width="90px">
                <template slot-scope="{row}">
                  <a :href="row.url" class="tba" target="_blank">下 载</a>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col class="mt20" :span="24" v-if="form.tables && form.tables != ''">
            <VerifyTables :data="form.tables" />
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="7">
        <VerifySteps :data="form" />
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="fr mt10">
          <el-button size="small" @click="handleCancel()">取 消</el-button>
          <el-button :disabled="form.state === 2 ? false : true" type="primary" size="small" @click="handleEdit()">撤 销</el-button>
        </div>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { revoke } from '@/api/verify/my'
import VerifySteps from '@/myComponents/VerifySteps'
import form from '@/utils/form'
import VerifyTables from './verify-tables'

export default {
  components: { VerifySteps, VerifyTables },
  extends: form,
  props: {
    reqUpd: {
      default: revoke,
      type: Function
    }
  },
  data() {
    return {
      forms: [],
      fileList: []
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.form = this.info.edit
        this.init()
      }
    }
  },
  mounted() {
  },
  methods: {
    init() {
      const files = this.form.files
      if (files && files !== '') this.fileList = JSON.parse(files)
      const forms = this.form.forms
      if (forms && forms !== '') this.forms = JSON.parse(forms)
    }
  }
}
</script>

<style scoped>
.f-body{
  border-top: 1px solid #dfe6ec;
  margin-bottom: 20px;
}
.f-item {
  margin-bottom: 0;
  border: 1px solid #dfe6ec;
  border-top: 0;
}
</style>>
